<template>
  <div>
    <el-form :inline="true" :model="params">
      <el-form-item label="三方订单号">
        <el-input v-model="params.third_sn" placeholder="三方订单号" maxlength="30" clearable></el-input>
      </el-form-item>
      <el-form-item label="订单异常类型">
        <el-select v-model="params.the_type" placeholder="订单异常类型" clearable>
          <el-option v-for="(v,i) in the_typeArr" :key="i" :label="v.label" :value="v.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="补单状态">
        <el-select v-model="params.status" placeholder="补单状态" clearable>
          <el-option label="待补单" :value="1"></el-option>
          <el-option label="已补单" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="search()">查询</el-button>
        <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" v-loading="tableLoading" row-key="Id" border style="width: 100%; ">
      <el-table-column prop="sn" align="center" label="平台订单号"></el-table-column>
      <el-table-column prop="third_sn" align="center" label="三方订单号"></el-table-column>
      <el-table-column prop="message" align="center" label="错误信息"></el-table-column>
      <el-table-column prop="status" align="center" label="补单状态">
        <template slot-scope="{row}">
          <el-tag type="success" v-if="row.status==1">已补单</el-tag>
          <el-tag type="danger" v-if="row.status==0">待补单</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="the_type" align="center" label="订单异常类型">
        <template slot-scope="{row}">
          <div v-for="(v,i) in the_typeArr" :key="i" v-if="v.value==row.the_type">{{v.label}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="is_close" align="center" label="是否关闭">
        <template slot-scope="{row}">
          <el-tag type="success" v-if="row.is_close==1">是</el-tag>
          <el-tag type="danger" v-if="row.is_close==0">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="order_money" align="center" label="订单金额">
        <template slot-scope="{row}">
          {{row.order_money/100}}
        </template>
      </el-table-column>
      <el-table-column prop="freight" align="center" label="运费">
        <template slot-scope="{row}">
          {{row.freight/100}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="params.page" :page-sizes="[10, 20, 50, 100]" :page-size="params.limit" :total="total" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  </div>
</template>

<script>
  import onlineSelectionApi from '@/api/onlineSelectionApi.js'
  export default {
    data() {
      return {
        params:{
          page:1,
          limit:10
        },
        the_typeArr:[
          {label:'下单校验不通过',value:0},
          {label:'余额不足',value:1},
          {label:'大额订单',value:2},
          {label:'其他',value:3}
        ],
        dataList: [],
        total: null,
      }
    },
    created() {
      this.getList()
    },
    methods:{
      // 每页数
      sizeChangeHandle (val) {
        this.params.page = 1
        this.params.limit = val
        this.getList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.params.page = val
        this.getList()
      },
      // 重置
      reset() {
        this.params = {
          page: 1,
          limit: 10,
        }
        this.$forceUpdate()
        this.getList()
      },
      // 查询
      search() {
        this.params.page = 1
        this.getList()
      },
     getList() {
       this.tableLoading = true;
       onlineSelectionApi.listErrorNew(this.params).then(res => {
         if (res && res.data.code == 200) {
           this.dataList = res.data.page.list
           this.total = res.data.page.totalCount
         }
         this.tableLoading = false;
       })
     },
    }
  }
</script>

<style>
</style>
